<template>
  <div class="detail">
    <Header :text="text" id="title"/>
    <div class="detail-content">
      <!-- 货物详情 -->
      <div class="transport">
        <el-collapse v-model="activeNames">
          <el-collapse-item :title="$t('cExport.exportDetail')" name="1">
                <div class="thingDetail">
                  <div class="one">
                    <div>
                      <span class="one-text">{{$t('cExport.packing')}}: </span>
                      <span>{{exportObj.shipmentNumber}}</span>
                    </div>
                  </div>
                  <div class="one">
                    <div>
                      <span class="one-text">{{$t('cExport.originCountry')}}: </span><span>{{exportObj.originCountry}}</span>
                    </div>
                  </div>
                  <div class="one">
                    <div>
                      <span class="one-text">{{$t('cExport.destinationCountry')}}: </span><span> {{exportObj.destinationCountry}}</span>
                    </div>
                  </div>
                  <div class="one">
                    <div>
                      <span class="one-text">{{$t('cExport.destinationHarbor')}}: </span><span>{{exportObj.destinationHarbor}}</span>
                    </div>
                  </div>
                  <div class="one">
                    <div>
                      <span class="one-text">{{$t('cTransportSearch.receivePeople')}}: </span><span> {{exportObj.receiver}}</span>
                    </div>
                  </div>
                  <div class="one">
                    <div>
                      <span class="one-text">{{$t('cExport.allBox')}}: </span><span>{{exportObj.totalBoxes}}</span>
                    </div>
                  </div>
                  <div class="one">
                    <div>
                      <span class="one-text">{{$t('cExport.allCount')}}: </span><span> {{exportObj.totalShippedQuantity}}</span>
                    </div>
                  </div>
                  <div class="one">
                    <div>
                      <span class="one-text">{{$t('cExport.allGross')}}: </span><span>{{exportObj.totalBoxWeight}}</span>
                    </div>
                  </div>
                  <div class="one">
                    <div>
                      <span class="one-text">{{$t('cExport.allPrice')}}: </span><span> {{exportObj.totalDeclaredValue}}</span>
                    </div>
                  </div>
                  <div class="one">
                    <div class="two">
                      <span class="one-text">{{$t('cExport.address')}}: </span>
                      <span>{{exportObj.address}}</span>
                    </div>
                  </div>
                </div>
                <!-- 货物列表详情 -->
                <div class="listDetail" v-if="exportObj.queryList">
                  <div class="top" @click="handleListDetail">
                    <span style="font-size:5vw;font-weight: bold;">{{$t('cExport.exportList')}}</span>
                    <i v-if="!listDetail" class="el-icon-arrow-down" style="font-size: 5vw;padding-left: 2.778vw"></i>
                    <i v-else class="el-icon-arrow-up" style="font-size: 5vw;padding-left: 2.778vw"></i>
                  </div>
                  <div class="bottom" v-if="!listDetail">
                    <div class="box">
                      <div class="box-content" v-for="(item,index) in exportObj.queryList" :key="index">
                        <div class="box-content-text">
                    <span>{{$t('cArroval.aog')}}: <span style="color:red" v-if="item.aog === 'AOG'">AOG</span>
                                 <span v-else>{{$t('cArroval.noAog')}}</span>
                    </span>
                          <span>{{$t('cExport.boxNum')}}: {{item.boxNumber}}</span>
                        </div>
                        <div class="box-content-text">
                          <span>{{$t('cExport.contract')}}: {{item.contractNo}}</span>
                          <span>{{$t('cExport.contarctType')}}: {{item.contarctType}}</span>
                        </div>
                        <div class="box-content-text">
                          <span>{{$t('cExport.company')}}: {{item.purchaser}}</span>
                          <span>{{$t('cExport.purchasingClerk')}}: {{item.purchasingClerk}}</span>
                        </div>
                        <div class="box-content-text">
                          <span>{{$t('cTransportSearch.partNum')}}: {{item.partNumber}}</span>
                          <span>{{$t('cTransportSearch.serialNum')}}: {{item.serialNumber}}</span>
                        </div>
                        <div class="box-content-text">
                          <span>{{$t('cTransportSearch.itemName')}}: {{item.chnCargoName}}</span>
                          <span>{{$t('cExport.shippedQuantity')}}: {{item.shippedQuantity}}</span>
                        </div>
                        <div class="box-content-text">
                          <span>{{$t('cExport.price')}}: {{item.declaredValue}}</span>
                          <span>{{$t('cExport.currency')}}: {{item.currency}}</span>
                        </div>
                        <div class="box-content-text">
                          <span>{{$t('cExport.weight')}}: {{item.netWeight}}</span>
                          <span>{{$t('cTransportSearch.danger')}}: {{item.dangerousGoods}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
          </el-collapse-item>
          <el-collapse-item :title="$t('cExport.waybillDetails')" name="2">
              <!-- 运单详情List -->
              <div v-if="exportObj.trantList && exportObj.trantList.length !== 0">
                <div class="transList" v-for="(item,index) in exportObj.trantList" :key="index">
                  <div class="waybillTop" style="border-bottom:1px dashed #797979;">
                    <div>
                      <span>{{$t('cExport.mainWaybillNumber')}}: {{item.mainWaybillNumber}}</span>
                      <span>{{$t('cExport.shippingDate')}}: {{item.shippingDate | changeDate}}</span>
                    </div>
                    <div>
                      <span>{{$t('cExport.originHarbor')}}: {{item.originHarbor}}</span>
                      <span>{{$t('cExport.port')}}: {{item.destinationHarbores}}</span>
                    </div>
                    <div>
                      <span>{{$t('cExport.allGross')}}: {{item.grossWeight}}</span>
                      <span>{{$t('cExport.boxes')}}: {{item.boxes}}</span>
                    </div>
                  </div>
                  <div v-if="item.tranvostList[0]">
                    <div v-for="(item1,index1) in item.tranvostList" :key="index1" :class="['waybillBottom', clickIndex === index ? 'active': '']" @click="handleWaybill(index)">
                    <div>
                      <span>{{$t('cExport.segment')}}: {{item1.departure}} ~ {{item1.destination}}</span>
                      <span>{{$t('cExport.transportWay')}}:{{item1.transportWay}}</span>
                    </div>
                    <div>
                      <span>{{$t('cExport.transportTool')}}: {{item1.transportTool}}</span>
                      <span>{{$t('cExport.flightDate')}}: {{item1.flightDate | changeDate}}</span>
                    </div>
                    <div>
                      <span>{{$t('cExport.sta')}}: {{item1.sta}}</span>
                    </div>
                    <div>
                      <span>{{$t('cExport.std')}}: {{item1.std}}</span>
                    </div>
                    <div>
                      <span>{{$t('cExport.eta')}}: {{item1.eta}}</span>
                    </div>
                    <div style="position:relative">
                      <span>{{$t('cExport.etd')}}: {{item1.etd}}</span>
                      <div style="font-size: 6.944vw;position:absolute;bottom:5%;right:5%">
<!--                        <i class="el-icon-edit" style="color: #409eff;margin-right: 10px" @click="handleEdit(item1)"></i>-->
<!--                        <i class="el-icon-delete" style="color: #409eff" @click="handleCancle(item1)"></i>-->
                      </div>
                    </div>
                  </div>
                  </div>
<!--                  <el-button v-if="item.mainWaybillNumber && item.mainWaybillNumber !== undefined" type="primary" icon="el-icon-plus" size="mini" style="margin-bottom: 10px" @click="handleAdd(item)">{{$t('cExport.addSegment')}}</el-button>-->
                </div>
              </div>
          </el-collapse-item>
          <el-collapse-item :title="$t('cExport.signDetails')" name="3">
            <div class="signDetail">
              <div>{{$t('cExport.consigneeDate')}}: </div>
              <div>{{exportObj.consigneeDate | changeDate}}</div>
            </div>
            <div class="signDetail">
              <div>{{$t('cExport.fileType')}}: </div>
              <div v-if="exportObj.files">
                <div v-for="item in exportObj.files" :key="item.id"><a style="color: blue" @click="handleDownLoad(item)">
                  {{item.fileType}}.{{item.originalFileName.split('.')[item.originalFileName.split('.').length - 1]}}
                  </a>
                </div>
              </div>
            </div>
            <div class="signDetail">
              <div>{{$t('cArroval.remark')}}: </div>
              <div>{{exportObj.remark}}</div>
            </div>
          </el-collapse-item>
          <el-collapse-item :title="$t('cTransportSearch.detail')" name="4">
                <el-timeline :reverse="false">
                  <el-timeline-item color="#0bbd87">
                    <span style="padding-right: 15px">{{$t('router.exportWarehouse')}}</span>  {{exportObj.receiveNotCustomsDate}}
                  </el-timeline-item>
                  <el-timeline-item>
                    <span style="padding-right: 15px">{{$t('btn.distribution')}}</span>  {{exportObj.assignNotReceiveDate}}
                  </el-timeline-item>
                  <el-timeline-item>
                    <span style="padding-right: 15px">{{$t('cExport.shipNotAssignDate')}}</span>  {{exportObj.shipNotAssignDate}}
                  </el-timeline-item>
                </el-timeline>
          </el-collapse-item>
          </el-collapse>
      </div>
      <div style="display: flex;justify-content: center;align-items: center;"><el-button style="width: 50%;" @click="handleBtn">{{$t('btn.capture')}}</el-button></div>
    </div>
    <AddTransport v-if="isShow" :exportObj="exportObj" :item="editItem" :record="exportObj" :title="title" @handleClose="handleClose"/>
    <van-image-preview
        v-model="isShowPreview"
        :images="previewImages"
        :startPosition="index"
        :loop="true"
    >
      <template v-slot:index>长按保存</template>
    </van-image-preview>
    <component :is="modelName" :pdfSrc="pdfUrl" @handleClose="handleClose"/>
  </div>
</template>

<script>
import Header from '../../../components/common/Header'
import AddTransport from './AddTransport'
import PDF from '@/components/common/PDF'
// import Map from '@/components/common/Map'
import { transportType } from "@/assets/js/export"
import { $export } from "@/api/export"
import { ImagePreview } from 'vant'
import { eAddTransport } from '@/utils/addTransport/addTransport.js'
import html2canvas from 'html2canvas'
import pdf from '@/utils/pdf/pdf'

export default {
  mixins: [eAddTransport,pdf],
  components: {
    Header,
    AddTransport,
    ImagePreview,
    PDF
  },
  data() {
    return {
      modelName: '',
      text: '',
      pdfUrl: '',
      activeName: 'first',
      activeNames: ['1','2','3','4'],
      listDetail: false,
      clickIndex: -1,// 记录被点击
      data: [0,1],
      isShow: false, // 控制弹框
      editItem: {}, // 被编辑的对象
      exportObj: {},
      number: 0,
      title: '',
      isShowPreview: false,
      previewImages: [],
      imgOk: [], // 已加载的图片
      index: 0
    }
  },
  methods: {
    handleClick() {},
    handleListDetail() {
      this.listDetail = !this.listDetail
    },
    // 运单被点击
    handleWaybill(index) {
      this.clickIndex = index
    },
    // 关闭弹框
    handleClose(value) {
      if (value === 1) this.handleDetail(this.number)
      this.modelName = ''
      this.isShow = false
      this.editItem = {}
    },
    // 获取详情
    handleDetail(number) {
      const obj = {
        shipmentNumber: number
      }
      $export.getDetils(obj)
             .then(res => {
              if (res.status === 200) {
                this.exportObj = res.data
              }
              else {
                this.$msg.fail(res.msg || res.message || '网络错误,请稍后再试')
              }
             })
             .catch(err => this.$msg.fail(err.message || '网络错误,请稍后再试'))
    },
    // 运输方式
    getTransportType(number) {
      let str = ''
      transportType.forEach(item => {
        if (item.value == number) str = item.options
      })
      return str
    },
    // 下载文件
    handleDownLoad(item) {
      $export.downFile({ fileId: item.id, fileType: item.fileType })
             .then(res => {
               let _this = this
               if (res.type == 'application/json') {
                  const reader = new FileReader()
                  reader.onload = function() {
                    const { msg } = JSON.parse(reader.result) //此处的msg就是后端返回的msg内容
                    _this.$msg.fail(msg)
                  }
                  reader.readAsText(res)
                } else {
                  item.originalFileName.indexOf('pdf') > 0 ? this.handlePDF(res) : this.handleImg(res)
                }
             })
            .catch(error => this.$msg.fail(error.message || '网络错误,请稍后再试'))
    },
    // 保存图片
    handleBtn() {
      this.$msg.loading()
      const a = document.querySelector('.detail-content')
      let width = a.clientWidth
      let height = a.clientHeight
      let opts = {
        width: width,
        height: height,
        x: 0,
        y: 0,
        useCORS: true
      }
      html2canvas(a,opts).then((canvas) => {
        var imgData = canvas.toDataURL('image/png');
        this.$msg.hideLoading()
        // imgData = imgData.replace('data:image/png;base64,', '')
        this.previewImages = []
        this.previewImages.push(imgData)
        this.isShowPreview = true
      })
    }
  },
  created() {
    this.text = this.$route.query.type
    this.number = this.$route.query.type.split(':')[1] || 0
    this.handleDetail(this.number)
    this.phone = sessionStorage.getItem('system')
    document.body.scrollTop = 0
  }
}
</script>

<style scoped>
.detail {
  background-color:white;
}
/* 修改tab */
.detail-content {
  position: relative;
  top: 18.333vw;
  left: 0;
  padding: 0 10px;
}
/deep/.van-popup--left {
  left: 0
}
/*/deep/.el-tabs__nav {*/
/*  transform: translate(14.444vw) !important;*/
/*}*/
/deep/#tab-second {
  padding: 0 11.111vw;
}
/deep/#tab-first {
  padding: 0 11.111vw;
}
/deep/.el-collapse {
  border-top: 0;
}
.first {
  padding: 0 2.778vw;
}
/deep/.el-collapse-item__header {
  font-size: 5vw !important;
  font-weight: bold;
}
/deep/.el-tabs__header {
  position: fixed;
  top: 19.333vw;
  z-index: 99;
  width: 100%;
  background-color: white;
}
/deep/.el-collapse-item__content {
  font-size: 3.889vw !important;
  padding-bottom: 0;
}
/* 货物详情 */
.one {
  display: flex;
  font-size: 15px;
}
.one div {
  flex: 1;
}
.one-text {
  font-weight: bold;
}
.one div span:nth-child(2) {
  text-indent: 7px;
}
.one div:last-child {
  display: flex;
}
.two {
  display: flex;
}
.two span:nth-child(1) {
  width: 22.833vw;
}
.two span:nth-child(2) {
  flex: 1;
}
/* 货物列表详情 */
.listDetail .top {
  margin: 2.778vw 0;
}
.box {
  padding: 0 2.778vw;
  border: 1px solid #797979;
  border-radius: 5px;
}
.box-content {
  padding: 2.778vw 0;
  border-bottom: 0.278vw dashed #797979;
}
.box-content:last-child {
  border-bottom: 0;
}
.box-content-text {
  display: flex;
}
.box-content-text span {
  flex: 1;
}
/* 运单详情 */
.waybillTop div{
  display: flex;
}
.waybillTop div span{
  flex: 1;
}
.waybillBottom {
  padding: 10px 0;
  border-bottom: 1px dashed #797979;
}
.waybillBottom div {
  display: flex;
}
.waybillBottom div span {
  flex: 1;
}
.active {
  background-color: rgba(172, 169, 169, 0.1);
}
/* 签收详情 */
.signDetail {
  display: flex;
}
.signDetail div:nth-child(2) {
  text-indent: 10px;
  flex: 1;
}
/deep/.el-timeline {
  padding-left: 15px;
}
</style>
